<template>
  <view class="appointment-market">
    <!-- 须知提示横幅 -->
    <view class="notice-banner" @click="showNotice">
      <view class="notice-banner-content">
        <uni-icons type="info-filled" size="20" color="#ff9800"></uni-icons>
        <text class="notice-banner-text">重要提示：点击查看入场须知</text>
        <uni-icons type="right" size="16" color="#ff9800"></uni-icons>
      </view>
    </view>

    <form @submit="submitForm">
      <!-- 入场信息 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-label required">入场信息</text>
        </view>

        <!-- 入场时间 -->
        <view class="time-selector">
          <view class="time-item">
            <text class="time-label">选择日期</text>
            <picker mode="date" @change="dateChange" :value="formData.appointmentDate" :start="minDate" :end="maxDate">
              <view class="time-picker">
                <text class="time-value">{{ formData.appointmentDate || '请选择日期' }}</text>
                <uni-icons type="calendar" size="20" color="#999"></uni-icons>
              </view>
            </picker>
          </view>

          <view class="time-item">
            <text class="time-label">选择时间</text>
            <picker mode="time" @change="timeChange" :value="formData.appointmentTime">
              <view class="time-picker">
                <text class="time-value">{{ formData.appointmentTime || '请选择时间' }}</text>
                <uni-icons type="clock" size="20" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
        </view>

        <text class="time-tip">* 默认为明天早上6点，请根据实际情况调整</text>

        <!-- 入场车辆 -->
        <view class="vehicle-section">
          <text class="vehicle-label">入场车辆</text>
          <view class="vehicle-selector-wrapper">
            <view class="picker-with-add">
              <picker class="picker-main" @change="handleVehicleChange" :value="vehicleIndex" :range="vehicleListWithInput" range-key="label">
                <view class="picker" v-if="formData.vehicleNo !== 'custom'">
                  <text class="picker-text">{{ formData.vehicleNo || '请选择车辆' }}</text>
                  <uni-icons type="bottom" size="16" color="#999"></uni-icons>
                </view>
              </picker>
              <view class="add-btn" @click="addVehicle">
                <uni-icons type="plus" size="16" color="#1890ff"></uni-icons>
              </view>
            </view>
          </view>
          <text class="vehicle-tip" v-if="defaultVehicle && formData.vehicleNo === defaultVehicle">* 已自动选择默认车辆</text>
        </view>
      </view>

      <!-- 供货商选择 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-label">供货商</text>
        </view>
        <view class="form-row">
          <view class="picker-with-add">
            <picker class="picker-main" @change="supplierChange" :value="supplierIndex" :range="supplierList" range-key="supplierName">
              <view class="picker">
                <text class="picker-text">{{
                  supplierIndex > -1 && supplierList[supplierIndex] ? supplierList[supplierIndex].supplierName : '请选择供货商'
                }}</text>
                <uni-icons type="bottom" size="16" color="#999"></uni-icons>
              </view>
            </picker>
            <view class="add-btn" @click="addSupplier">
              <uni-icons type="plus" size="16" color="#1890ff"></uni-icons>
            </view>
          </view>
        </view>
        <text class="section-tip">* 信息来自系统预录入名单</text>
      </view>

      <!-- 营业执照信息 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-label required">营业执照信息</text>
        </view>
        <imageUploader
          :initialImageUrl="formData.businessLicense"
          @upload-complete="handleBusinessLicenseUpload"
          uploadText="点击上传营业执照图片"
          uploadHint="请上传清晰的营业执照照片"
        />
      </view>

      <!-- 进货清单信息 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-label required">进货清单信息</text>
        </view>
        <imageUploader
          :initialImageUrl="formData.purchaseList"
          @upload-complete="handlePurchaseListUpload"
          uploadText="点击上传进货清单图片"
          uploadHint="需包含商品名称、数量、农批市场签章"
        />
      </view>

      <!-- 商品信息 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-label required">商品信息</text>
        </view>

        <view class="goods-list">
          <view class="goods-item" v-for="(item, index) in formData.goodsList" :key="index">
            <view class="goods-item-header">
              <text class="goods-item-title">商品 {{ index + 1 }}</text>
              <uni-icons v-if="formData.goodsList.length > 1" type="close" size="20" color="#ff4d4f" @click="removeGoods(index)"></uni-icons>
            </view>

            <view class="goods-form-row">
              <text class="goods-label">商品名称</text>
              <picker @change="(e) => goodsChange(e, index)" :value="item.goodsIndex" :range="goodsList" range-key="goodsName">
                <view class="picker">
                  <text class="picker-text">{{ item.goodsName || '请选择商品' }}</text>
                  <uni-icons type="bottom" size="16" color="#999"></uni-icons>
                </view>
              </picker>
            </view>

            <view class="goods-form-row">
              <text class="goods-label">数量</text>
              <view class="quantity-input-wrapper">
                <input
                  class="quantity-input"
                  v-model="item.quantity"
                  type="number"
                  placeholder="请输入数量"
                  @input="onQuantityChange(index, $event)"
                />
                <text class="unit-text">{{ item.unit || 'kg' }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="add-goods-btn" @click="addGoods">
          <uni-icons type="plus" size="20" color="#1890ff"></uni-icons>
          <text class="add-goods-text">添加商品</text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" :class="{ 'submit-btn-active': canSubmit }" form-type="submit">
        {{ submitButtonText }}
      </button>
    </form>

    <!-- 入场须知弹窗 -->
    <view class="notice-container" v-if="showNoticePopup">
      <view class="mask" @click="hideNotice"></view>

      <view class="notice-popup">
        <text class="notice-title">入场须知</text>

        <view class="notice-content">
          <view class="notice-item">
            <text class="item-number">1.</text>
            <text class="item-text">请确保上传的进货清单包含商品名称、数量及农批市场签章</text>
          </view>

          <view class="notice-item">
            <text class="item-number">2.</text>
            <text class="item-text">营业执照需清晰展示执照编号与经营范围</text>
          </view>

          <view class="notice-item">
            <text class="item-number">3.</text>
            <text class="item-text">请准确选择入场时间，超时需重新预约</text>
          </view>

          <view class="notice-item">
            <text class="item-number">4.</text>
            <text class="item-text">入场核验码在预约入场时间后失效，请及时保存</text>
          </view>

          <view class="notice-item">
            <text class="item-number">5.</text>
            <text class="item-text">所有信息需真实有效，如有虚假将取消入场资格</text>
          </view>
        </view>

        <button class="confirm-btn" @click="hideNotice">我知道了</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mySupplierList } from '@/api/system/supplier.js';
import { getCurrentUserMarket } from '@/api/market';
import { isHttp } from '@/utils/validate';
import imageUploader from '@/components/image-uploader.vue';
import config from '@/config';
const baseUrl = config.baseUrl;

export default {
  components: {
    imageUploader,
  },
  data() {
    // 获取明天的日期
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1); // 明天
    const year = tomorrow.getFullYear();
    const month = String(tomorrow.getMonth() + 1).padStart(2, '0');
    const day = String(tomorrow.getDate()).padStart(2, '0');
    const tomorrowDate = `${year}-${month}-${day}`;

    return {
      // 当前市场信息
      currentMarketId: null,
      currentMarketName: null,
      formData: {
        supplierId: '',
        supplierName: '',
        businessLicense: '',
        purchaseList: '',
        appointmentDate: tomorrowDate, // 设置默认日期为明天
        appointmentTime: '06:00', // 设置默认时间为早上6点
        vehicleNo: '', // 车牌号
        customVehicleNo: '', // 自定义车牌号
        goodsList: [
          {
            goodsId: '',
            goodsName: '',
            goodsIndex: -1,
            quantity: '',
            unit: 'kg',
          },
        ],
      },
      supplierList: [],
      supplierIndex: -1,
      goodsList: [],
      showNoticePopup: false,
      vehicleList: [], // 车辆列表
      vehicleIndex: 0, // 选中的车辆索引
      defaultVehicle: '', // 默认车辆
    };
  },
  computed: {
    // 是否可以提交
    canSubmit() {
      return (
        this.formData.supplierId &&
        this.formData.businessLicense &&
        this.formData.purchaseList &&
        this.formData.appointmentDate &&
        this.formData.appointmentTime &&
        this.formData.goodsList.length > 0 &&
        this.formData.goodsList.every((item) => item.goodsId && item.quantity)
      );
    },
    // 最小日期（明天）
    minDate() {
      const tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1); // 明天
      const year = tomorrow.getFullYear();
      const month = String(tomorrow.getMonth() + 1).padStart(2, '0');
      const day = String(tomorrow.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 最大日期（30天后）
    maxDate() {
      const now = new Date();
      now.setDate(now.getDate() + 30); // 设置为30天后
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    // 车辆列表（包含手动输入选项）
    vehicleListWithInput() {
      const list = this.vehicleList.map((v) => ({
        value: v.vehiclePlate || v.vehicle_plate,
        label: `${v.vehiclePlate || v.vehicle_plate} ${
          v.vehicleBrand || v.vehicle_brand ? '(' + (v.vehicleBrand || v.vehicle_brand) + ')' : ''
        }`.trim(),
        vehicleInfo: v,
      }));
      // list.push({
      // 	label: '手动输入车牌号',
      // 	value: 'custom'
      // })
      return list;
    },

    // 提交按钮文本
    submitButtonText() {
      if (!this.formData.supplierId) {
        return '请选择供货商';
      } else if (!this.formData.businessLicense) {
        return '请上传营业执照';
      } else if (!this.formData.purchaseList) {
        return '请上传进货清单';
      } else if (!this.formData.goodsList || this.formData.goodsList.length === 0) {
        return '请添加商品';
      } else if (!this.formData.goodsList.every((item) => item.goodsId)) {
        return '请选择商品名称';
      } else if (!this.formData.goodsList.every((item) => item.quantity && parseFloat(item.quantity) > 0)) {
        return '请输入商品数量';
      } else if (!this.formData.appointmentDate || !this.formData.appointmentTime) {
        return '请选择入场时间';
      } else if (!this.formData.vehicleNo && !this.formData.customVehicleNo) {
        return '请选择或输入入场车辆';
      } else {
        return '提交入场预约';
      }
    },
  },
  watch: {
    // 监听商品列表变化，调试用
    'formData.goodsList': {
      handler(newVal, oldVal) {
        console.log('商品列表变化:', newVal);
      },
      deep: true,
    },
  },
  async onLoad() {
    // 从服务器获取当前用户的市场信息
    try {
      const res = await getCurrentUserMarket();
      if (res.code === 200 && res.data) {
        this.currentMarketId = res.data.deptId;
        this.currentMarketName = res.data.deptName;
      } else {
        uni.showModal({
          title: '提示',
          content: '您还未选择市场，请先选择市场后再进行预约',
          showCancel: false,
          confirmText: '去选择',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/mine/market/index',
              });
            }
          },
        });
        return;
      }
    } catch (error) {
      console.error('获取市场信息失败:', error);
      uni.showToast({
        title: '获取市场信息失败',
        icon: 'none',
      });
      return;
    }

    this.loadSuppliers();
    this.loadGoods();
    this.loadVehicles(); // 加载车辆列表

    // 获取商户ID
    try {
      const userId = uni.getStorageSync('userId');
      if (userId) {
        const { getMerchantByUserId } = await import('@/api/system/merchant.js');
        const merchantInfo = await getMerchantByUserId(userId);

        if (merchantInfo.code === 200 && merchantInfo.data) {
          const merchantId = merchantInfo.data.merchantId;
          uni.setStorageSync('merchantId', merchantId);
          console.log('获取商户ID成功:', merchantId);
        } else {
          console.log('用户暂无商户信息');
        }
      }
    } catch (error) {
      console.error('获取商户信息失败:', error);
    }
  },
  methods: {
    // 添加供货商
    addSupplier() {
      uni.navigateTo({
        url: '/pages/supplier/add',
      });
    },

    // 添加商品
    addGoods() {
      uni.navigateTo({
        url: '/pages/goods/add',
      });
    },

    // 添加车辆
    addVehicle() {
      uni.navigateTo({
        url: '/pages/vehicle/add',
      });
    },
    // 加载供货商列表
    async loadSuppliers() {
      try {
        const response = await mySupplierList();
        console.log('供货商列表响应:', response);

        if (response.code === 200) {
          // 处理rows可能是对象的情况
          let suppliers = response.rows || response.data || [];

          // 如果rows是对象而不是数组，转换为数组
          if (!Array.isArray(suppliers) && typeof suppliers === 'object') {
            suppliers = Object.values(suppliers);
          }

          this.supplierList = suppliers;
          console.log('加载供货商成功，数量:', this.supplierList.length);
          console.log('供货商列表:', this.supplierList);
        } else {
          console.error('加载供货商失败，响应码:', response.code, response.msg);
          this.supplierList = [];
        }
      } catch (error) {
        console.error('加载供货商失败，详细错误:', error);
        this.supplierList = [];

        // 判断错误类型
        if (error.statusCode === 403 || (error.data && error.data.code === 403)) {
          uni.showToast({
            title: '无权限访问供货商',
            icon: 'none',
            duration: 2000,
          });
        } else if (error.statusCode === 401) {
          uni.showToast({
            title: '请先登录',
            icon: 'none',
            duration: 2000,
          });
        } else {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none',
            duration: 2000,
          });
        }
      }
    },

    // 供货商选择
    supplierChange(e) {
      this.supplierIndex = e.detail.value;
      const supplier = this.supplierList[this.supplierIndex];
      if (supplier) {
        this.formData.supplierId = supplier.supplierId;
        this.formData.supplierName = supplier.supplierName;

        // 使用 Vue.set 重置商品列表，确保响应式
        this.$set(this.formData, 'goodsList', [
          {
            goodsId: '',
            goodsName: '',
            goodsIndex: -1,
            quantity: '',
            unit: 'kg',
          },
        ]);
      }
    },

    // 加载商品列表（初始为空，选择供货商后才加载）
    async loadGoods() {
      try {
        const { myGoodsList } = await import('@/api/business/goods.js');
        const response = await myGoodsList();
        if (response.code === 200) {
          this.goodsList = response.data || [];
        }
      } catch (error) {
        this.goodsList = [];
      }
    },

    // 选择商品
    goodsChange(e, index) {
      const selectedIndex = e.detail.value;
      const selectedGoods = this.goodsList[selectedIndex];
      if (selectedGoods) {
        // 使用 Vue.set 确保响应式更新
        this.$set(this.formData.goodsList[index], 'goodsId', selectedGoods.goodsId);
        this.$set(this.formData.goodsList[index], 'goodsName', selectedGoods.goodsName);
        this.$set(this.formData.goodsList[index], 'goodsIndex', selectedIndex);
        this.$set(this.formData.goodsList[index], 'unit', selectedGoods.unit || 'kg');

        // 强制更新视图
        this.$forceUpdate();
      }
    },

    // 添加商品
    addGoods() {
      this.formData.goodsList.push({
        goodsId: '',
        goodsName: '',
        goodsIndex: -1,
        quantity: '',
        unit: 'kg',
      });
    },

    // 删除商品
    removeGoods(index) {
      this.formData.goodsList.splice(index, 1);
    },

    // 处理数量输入变化
    onQuantityChange(index, event) {
      const value = event.detail.value;
      this.$set(this.formData.goodsList[index], 'quantity', value);
      // 强制更新视图
      this.$forceUpdate();
    },

    // 日期选择
    dateChange(e) {
      const selectedDate = e.detail.value;
      const today = this.minDate;

      // 检查选择的日期是否小于今天
      if (selectedDate < today) {
        uni.showToast({
          title: '不能选择过去的日期',
          icon: 'none',
          duration: 2000,
        });
        // 重置为今天
        this.formData.appointmentDate = today;
      } else {
        this.formData.appointmentDate = selectedDate;
      }
    },

    // 时间选择
    timeChange(e) {
      this.formData.appointmentTime = e.detail.value;
    },

    // 加载车辆列表
    async loadVehicles() {
      try {
        const { getVehicleList } = await import('@/api/system/vehicle.js');
        const response = await getVehicleList();

        if (response.code === 200) {
          this.vehicleList = response.data || [];

          // 查找并设置默认车辆
          const defaultVehicle = this.vehicleList.find((v) => v.isDefault === '1' || v.is_default === '1');
          if (defaultVehicle) {
            const vehiclePlate = defaultVehicle.vehiclePlate || defaultVehicle.vehicle_plate;
            this.defaultVehicle = vehiclePlate;
            this.formData.vehicleNo = vehiclePlate;
            // 找到默认车辆在列表中的索引
            this.vehicleIndex = this.vehicleListWithInput.findIndex((v) => v.value === vehiclePlate);
          }
        }
      } catch (error) {
        console.error('加载车辆列表失败:', error);
        this.vehicleList = [];
      }
    },

    // 处理车辆选择
    handleVehicleChange(e) {
      const selectedIndex = e.detail.value;
      this.vehicleIndex = selectedIndex;
      const selectedOption = this.vehicleListWithInput[selectedIndex];

      if (selectedOption.value === 'custom') {
        // 用户选择自定义输入
        this.formData.vehicleNo = 'custom';
        this.formData.customVehicleNo = '';
      } else {
        // 用户选择了具体的车辆
        this.formData.vehicleNo = selectedOption.value;
        this.formData.customVehicleNo = '';
      }
    },

    // 处理主车辆输入框失焦
    handleMainVehicleBlur(e) {
      const value = e.detail.value;
      if (value && value.trim()) {
        this.formData.customVehicleNo = value.trim();
      }
    },

    // 处理营业执照上传成功
    handleBusinessLicenseUpload(url) {
      console.log('handleBusinessLicenseUpload', url);
      this.formData.businessLicense = url;
    },

    // 处理进货清单上传成功
    handlePurchaseListUpload(url) {
      console.log('handlePurchaseListUpload', url);
      this.formData.purchaseList = url;
    },

    // 提交表单
    async submitForm() {
      if (!this.validateForm()) return;

      uni.showLoading({
        title: '提交中...',
      });

      try {
        // 获取商户ID
        let merchantId = uni.getStorageSync('merchantId');
        if (!merchantId) {
          // 暂时允许无商户提交，使用默认商户ID
          merchantId = 13; // 使用测试商户ID
          console.log('无商户信息，使用默认商户ID:', merchantId);
        }

        // 使用从服务器获取的市场ID
        const marketId = this.currentMarketId;

        // 确定最终的车牌号
        const finalVehicleNo = this.formData.vehicleNo === 'custom' ? this.formData.customVehicleNo : this.formData.vehicleNo;

        // 构建提交数据
        const submitData = {
          appointmentType: '1', // 农批市场入场销售预约
          merchantId: parseInt(merchantId) || 0,
          deptId: marketId ? parseInt(marketId) : null, // 添加市场ID
          supplierId: this.formData.supplierId,
          supplierName: this.formData.supplierName,
          appointmentDate: this.formData.appointmentDate,
          appointmentTime: this.formData.appointmentTime,
          vehicleNo: finalVehicleNo || '', // 添加车辆信息
          businessLicense: this.formData.businessLicense,
          purchaseList: this.formData.purchaseList,
          goodsList: this.formData.goodsList.map((item) => ({
            goodsId: item.goodsId,
            goodsName: item.goodsName,
            quantity: parseFloat(item.quantity) || 0,
            unit: item.unit,
          })),
        };

        // 调用预约申请API
        const { submitAppointment } = await import('@/api/system/appointment.js');
        const response = await submitAppointment(submitData);

        uni.hideLoading();

        if (response.code === 200) {
          uni.showToast({
            title: '入场销售预约已提交',
            icon: 'success',
          });

          // 跳转到预约记录页面
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/appointment/record',
            });
          }, 1500);
        } else {
          uni.showToast({
            title: response.msg || '提交失败',
            icon: 'error',
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('提交入场销售预约失败:', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'error',
        });
      }
    },

    // 验证表单
    validateForm() {
      if (!this.formData.supplierId) {
        uni.showToast({
          title: '请选择供货商',
          icon: 'none',
        });
        return false;
      }
      if (!this.formData.businessLicense) {
        uni.showToast({
          title: '请上传营业执照',
          icon: 'none',
        });
        return false;
      }
      if (!this.formData.purchaseList) {
        uni.showToast({
          title: '请上传进货清单',
          icon: 'none',
        });
        return false;
      }
      if (this.formData.goodsList.length === 0) {
        uni.showToast({
          title: '请至少添加一个商品',
          icon: 'none',
        });
        return false;
      }
      for (let i = 0; i < this.formData.goodsList.length; i++) {
        const item = this.formData.goodsList[i];
        if (!item.goodsId) {
          uni.showToast({
            title: `请选择商品${i + 1}的名称`,
            icon: 'none',
          });
          return false;
        }
        if (!item.quantity) {
          uni.showToast({
            title: `请输入商品${i + 1}的数量`,
            icon: 'none',
          });
          return false;
        }
      }
      if (!this.formData.appointmentDate) {
        uni.showToast({
          title: '请选择日期',
          icon: 'none',
        });
        return false;
      }
      if (!this.formData.appointmentTime) {
        uni.showToast({
          title: '请选择时间',
          icon: 'none',
        });
        return false;
      }
      return true;
    },

    // 显示入场须知
    showNotice() {
      this.showNoticePopup = true;
    },

    // 隐藏入场须知
    hideNotice() {
      this.showNoticePopup = false;
    },
  },
};
</script>

<style scoped>
.label {
  width: 160rpx;
  font-size: 30rpx;
  color: #333;
}

.picker {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #e6e6e6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.picker:active {
  background-color: #f8f8f8;
  border-color: #1890ff;
}

/* 选择器和添加按钮组合布局 */
.picker-with-add {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.picker-main {
  flex: 1;
}

.add-btn {
  width: 60rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  border: 1rpx solid #1890ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.1);
  transition: all 0.2s;
  flex-shrink: 0;
}

.add-btn:active {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  transform: scale(0.95);
  box-shadow: 0 1rpx 4rpx rgba(24, 144, 255, 0.2);
}

.add-btn:active uni-icons {
  color: #fff !important;
}

.appointment-market {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

/* 须知提示横幅 */
.notice-banner {
  background: linear-gradient(135deg, #fff4e6 0%, #ffe7ba 100%);
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(255, 152, 0, 0.15);
  transition: all 0.3s ease;
}

.notice-banner:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.notice-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notice-banner-text {
  flex: 1;
  margin: 0 20rpx;
  font-size: 28rpx;
  color: #ff6b00;
  font-weight: 500;
}

.form-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-right: 20rpx;
  white-space: nowrap;
}

.section-label.required::before {
  content: '*';
  color: #ff4d4f;
  margin-right: 8rpx;
}

.section-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 表单行样式 */
.form-row {
  margin-top: 20rpx;
}

.form-row .picker {
  width: 100%;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-row .picker-text {
  font-size: 30rpx;
  color: #333;
  flex: 1;
}

.license-upload-area {
  position: relative;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 30rpx;
  min-height: 320rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.license-image {
  width: 100%;
  height: 320rpx;
  object-fit: contain;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.upload-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: rgba(255, 149, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.upload-hint {
  font-size: 24rpx;
  color: #999;
}

.change-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.license-check {
  display: flex;
  align-items: center;
}

.check-text {
  font-size: 24rpx;
  color: #52c41a;
  margin-left: 10rpx;
}

.upload-area-dashed {
  border: 2rpx dashed #d9d9d9;
  border-radius: 12rpx;
  padding: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.upload-desc {
  font-size: 28rpx;
  color: #333;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}

.upload-requirement {
  font-size: 24rpx;
  color: #ff9500;
}

/* 已上传图片容器 */
.uploaded-image-container {
  position: relative;
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchase-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.time-selector {
  display: flex;
  gap: 20rpx;
}

.time-item {
  flex: 1;
}

.time-label {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.time-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  border: 2rpx solid #f0f0f0;
  height: 88rpx;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.time-picker:active {
  background-color: #f8f9fa;
  border-color: #1890ff;
  transform: scale(0.98);
}

.time-value {
  font-size: 30rpx;
  color: #333;
  line-height: 40rpx;
  font-weight: 500;
}

.time-value:empty::before {
  content: attr(placeholder);
  color: #999;
  font-weight: normal;
}

.time-tip {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 车辆选择相关样式 */
.vehicle-selector-wrapper {
  margin-top: 20rpx;
}

.vehicle-selector-wrapper .picker {
  width: 100%;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vehicle-selector-wrapper .picker-text {
  font-size: 30rpx;
  color: #333;
  flex: 1;
}

.vehicle-selector-wrapper .vehicle-input {
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  border: 2rpx solid #1890ff;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 30rpx;
  color: #333;
  text-transform: uppercase;
}

.vehicle-input:focus {
  border-color: #1890ff;
  box-shadow: 0 2rpx 12rpx rgba(24, 144, 255, 0.15);
}

.vehicle-tip {
  display: block;
  font-size: 24rpx;
  color: #ff9500;
  margin-top: 10rpx;
}

/* 车辆选择部分 */
.vehicle-section {
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.vehicle-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

/* 商品列表样式 */
.goods-list {
  margin-top: 20rpx;
}

.goods-item {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.goods-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.goods-item-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.goods-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.goods-form-row:last-child {
  margin-bottom: 0;
}

.goods-label {
  width: 140rpx;
  font-size: 28rpx;
  color: #666;
}

.quantity-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 2rpx solid #e8e8e8;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 70rpx;
}

.quantity-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.unit-text {
  font-size: 26rpx;
  color: #999;
  margin-left: 10rpx;
}

.add-goods-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  border: 2rpx dashed #1890ff;
  border-radius: 12rpx;
  margin-top: 20rpx;
}

.add-goods-text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #1890ff;
}

.submit-btn {
  background-color: #b0b0b0;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  margin: 40rpx 20rpx;
  height: 80rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.submit-btn-active {
  background-color: #ff9500 !important;
}

.submit-btn:active {
  opacity: 0.8;
}

/* 入场须知弹窗样式 */
.notice-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.notice-popup {
  position: relative;
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 50rpx 40rpx 40rpx;
  z-index: 1001;
}

.notice-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
}

.notice-content {
  margin-bottom: 50rpx;
}

.notice-item {
  display: flex;
  margin-bottom: 30rpx;
  line-height: 1.6;
}

.item-number {
  color: #ff8800;
  font-size: 32rpx;
  font-weight: bold;
  margin-right: 15rpx;
  flex-shrink: 0;
}

.item-text {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  background-color: #ff8800;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-btn:active {
  opacity: 0.8;
}
</style>
